<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/shopping-mall-index.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/zhonglin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/zhongling2.js"></script>
    <script>
        $(function(){
            $("[name='delCartItem']").click(function(){
                if(window.confirm("确定删除吗？")){
                    var pId = $(this).attr("id")
                    $.ajax({
                        url: "${pageContext.request.contextPath}/cart/delCartItem",
                        data: {
                            pId: pId
                        },
                        success: function (data) {
                            if(data!=null){
                                $("#total").text(data)
                                $("#div"+pId).remove()
                            }else{
                                alert("删除失败")
                            }
                        }
                    })
                }

            })

            $("#clear").click(function(){
                if(window.confirm("确定清空吗？")){
                    $.ajax({
                        url: "${pageContext.request.contextPath}/cart/clearCart",

                        success: function (data) {
                            if(data!=null){
                                $("#total").text(data)
                                $("#size").text(0)
                                $("#allCartItem").remove()
                            }else{
                                alert("清空失败")
                            }
                        }
                    })
                }
            })

            $("[name='change']").click(function(){
                var pId = $(this).parent().find("[name='count']").attr("id")
                var count = $(this).parent().find("[name='count']").val()
                $.ajax({
                    url: "${pageContext.request.contextPath}/cart/changeCount",
                    data: {
                        pId: pId,
                        count:count
                    },
                    success: function (data) {
                        if(data!=null){
                            $("#total").text(data)
                        }else{
                            alert("修改失败")
                        }
                    }
                })
            })
        })
    </script>
</head>

<body style="position:relative;">

<!--header-->
<%@include file="common/header.jsp" %>

<!--logo search weweima-->
<%@include file="common/logoAndSearch.jsp" %>

    
    <!--内容开始-->
    <div class="cart-content w1200" >
    	<ul class="cart-tit-nav">
        	<li class="current"><a href="#">全部商品   <span id="size">${cart.cartItemMap.size()}</span></a></li>

            <div style="clear:both;"></div>
        </ul>
        <div class="cart-con-tit">
        	<p class="p1">
            	<input type="checkbox" value="" name="hobby"></input>
				<span>全选</span>
            </p>
            <p class="p2">商品信息</p>
            <p class="p3">规格</p>
            <p class="p4">数量</p>
            <p class="p5">单价（元）</p>
            <p class="p6">金额（元）</p>
            <p class="p7">操作</p>
        </div>
        
        <div class="cart-con-info" id="allCartItem">
        	<div class="info-top">
            	<input type="checkbox" value="" name="hobby"></input>
				<span>商家：爱尚微购</span>
            </div>
            <c:forEach items="${cart.cartItemMap}" var="cartItem">
            <div class="info-mid" id="div${cartItem.product.pId}">
            	<input type="checkbox" value="" name="hobby" class="mid-ipt f-l"></input>
                <div class="mid-tu f-l">
                	<a href="#"><img src="${pageContext.request.contextPath}/${cartItem.product.image}" style="width: 80px;height: 80px;"/></a>
                </div>
                <div class="mid-font f-l" style="width: 200px;">
                	<a href="#">${cartItem.product.pName}<br />${fn:substring(cartItem.product.pDesc,0 ,20 )}..</a>
                    <span>满赠</span>
                </div>
                <div class="mid-guige f-l">
                	<p>颜色：蓝色</p>
                    <p>尺码：XL</p>
                    <a href="JavaScript:;" class="xg" xg="xg1">修改</a>
                    <div class="guige-xiugai" xg-g="xg1">
                    	<div class="xg-left f-l">
                        	<dl>
                            	<dt>颜  色</dt>
                                <dd>
                                	<a href="JavaScript:;" class="current">黑色</a>
                                    <a href="JavaScript:;">白色</a>
                                </dd>
                                <div style="clear:both;"></div>
                            </dl>
                            <dl>
                            	<dt>尺  码</dt>
                                <dd>
                                	<a href="JavaScript:;" class="current">M</a>
                                    <a href="JavaScript:;">L</a>
                                    <a href="JavaScript:;">XL</a>
                                </dd>
                                <div style="clear:both;"></div>
                            </dl>
                            <a href="JavaScript:;" class="qd">确定</a>
                            <a href="JavaScript:;" class="qx" qx="xg1">取消</a>
                        </div>
                    	<div class="xg-right f-l">
                        	<a href="#"><img src="${pageContext.request.contextPath}/images/dai2.gif" /></a>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
                <div class="mid-sl f-l">
                	<a href="JavaScript:;" class="sl-left" name="change">-</a>
                    <input type="text" readonly name="count" value="${cartItem.count}" id="${cartItem.product.pId}"/>
                    <a href="JavaScript:;" class="sl-right" name="change">+</a>
                </div>
                <p class="mid-dj f-l">¥ <span>${cartItem.product.shopPrice}</span></p>
                <p class="mid-je f-l">¥ <span>${cartItem.subTotal}</span></p>
                <div class="mid-chaozuo f-l">
                	<a href="#">移入收藏夹</a>
                    <a href="javaScript:;" name="delCartItem" id="${cartItem.product.pId}">删除</a>
                </div>
                <div style="clear:both;"></div>
            </div>
            </c:forEach>
        </div>

        
        <!--分页-->

       	<div class="cart-con-footer">
        	<div class="quanxuan f-l">
            	<input type="checkbox" value="" name="hobby"></input>
                <span>全选</span>
                <a href="javaScript:;" id="clear">清空</a>
                <a href="#">加入收藏夹</a>
                <p>（此处始终在屏幕下方）</p>
            </div>
            <div class="jiesuan f-r">
            	<div class="jshj f-l">
                	<p>合计（不含运费）</p>
                	<p class="jshj-p2">
                    	￥：<span id="total">${cart.total}</span>
                    </p>
                </div>
            	<a href="${pageContext.request.contextPath}/order/toConfirmOrder" class="js-a1 f-l">结算</a>
                <div style="clear:both;"></div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

<!--底部一块-->
<%@include file="common/footer.jsp" %>
</body>
</html>
